<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>自动打标签</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #f0f2f5;
			min-width: 1020px;
		}
		/*公共部分 start*/
		.public_header_container{
			height: 48px;
			background: #fff;
			display: -webkit-box;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			padding-left: 15px;
			border-bottom: 1px solid #e8e8e8;
		}
		.public_header_container p{
			font-size: 16px;
			font-weight: 500;
			color: rgba(0,0,0,.85);
			line-height: 28px;
		}
		.public_main_container{
			padding: 16px;
		}
		.public_main_content{
			background: #fff;
			padding: 24px;
		}
		.public_firstTitle_container{
			display: flex;
			align-items: center;
		}
		.customerInfo_firstTitle{
			font-weight: 700;
			font-size: 15px;
			margin-right: 12px;
		}
		.customerInfo_secendTitle{
			margin-top: 20px;
			margin-bottom: 8px;
			color: rgba(0,0,0,.65);
			font-size: 14px;
		}
		.line{
			width: 100%;
			height: 1px;
			background: #ececec;
			margin-top: 20px;
			margin-bottom: 32px;
		}
		.customerInfo_button{
			border: 1px solid #1890ff;
			color: #1890ff;
			width: 74px;
			padding: 0;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 16px;
			outline: none;
			appearance: none;
			background: #fff;
			line-height: 30px;
			border-radius: 2px;
			cursor: pointer;
		}
		.public_Control_container{
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.public_Control_container svg{
			width: 15px;
			height: 15px;
			margin-right: 4px;
		}
		.public_Control_container span{
			font-size: 14px;
			font-weight: 400;
			color: rgba(0,0,0,.85);
		}
		.customerInfo_publicLable{
			height: 30px;
			padding: 0 10px;
			background: #f6f6f6;
			border-radius: 4px;
			border: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(0,0,0,.65);
			min-width: 51px;
		}
		.customerInfo_publicLable svg{
			width: 14px;
			height: 14px;
			margin-right: 9px;
		}
		.customerInfo_publicLable span{

		}
		.color-blue{
			color: #1890ff !important;
		}
		.public_RightShowcased_container{
			height: 38px;
			line-height: 38px;
			border-width: 1px;
			border-style: solid;
			border-color: #e6e6e6;
			background-color: #fff;
			border-radius: 2px;
			box-sizing: border-box;
			padding-left: 10px;
			overflow: hidden;		
		}
		.public_RightShowcased_container li{
			height: 36px;
			line-height: 36px;
			float: left;
		}
		.cursor-pointer{
			cursor: pointer;
		}
		/*公共部分 end*/
		/*客户信息设置内容区域 start*/
		.customerInfo_container{
			display: flex;
		}
		.customerInfo_left_container{
			flex: 1;
		}
		.customerInfo_right_container{
			width: 360px;
			margin-left: 97px;
			margin-right: 49px;
		}
		.customerInfo_right_container h4{
			color: rgba(0,0,0,.65);
			font-size: 14px;
			text-align: center;
			margin-bottom: 20px;
		}
		.customerInfo_rightImg_container{
			width: 328px;
			background: #f4f4f4;
			padding: 12px;
		}
		.customerInfo_rightImg_container img{
			width: 328px;
			height: 620px;
		}
		.customerInfo_left_content{

		}
		.customerInfo_titleControl_container{
			display: flex;
			align-items: center;
			margin-left: 12px;
			
		}
		.customerInfo_titleControl_container svg{
			width: 15px;
			height: 15px;
			margin-right: 4px;
		}
		.customerInfo_titleControl_container span{

		}
		.customerInfo_publicLable_container{
			overflow: hidden;

		}
		.customerInfo_publicLable_container li{
			float: left;
			margin-right: 10px;
			margin-bottom: 12px;
		}
		.customerInfo_publicLable_container li svg{
			width: 14px;
			height: 14px;
		}
		.customerInfo_publicLable_container li span{

		}
		.customize_info_list_container{

		}
		.customize_info_list_container li{
			display: flex;
			align-items: center;
			margin-top: 12px;
		}
		.customize_info_listLeft_container{
			width: 115px;
			display: flex;
			margin-right: 16px;
		}
		.customize_info_listControl_container{
			display: flex;
			align-items: center;
			flex: 1;
		}
		.customize_info_listControl_container li{
			margin-top: 0;
			padding: 0 10px;
			border-right: 1px solid #ececec;
		}
		.customize_info_listControl_container li:last-child{
			border-right: none;
		}
		/*客户信息设置内容区域 end*/
		/*标签部分*/
		.customerLabel_mainList_content{
			flex: 1;
			padding-right: 245px;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 5px;
		}
		.customerLabel_mainList_content li{

			height: 28px;
			display: -webkit-box;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			align-items: center;
			padding-left: 14px;
			padding-right: 14px;
			border: 1px solid #e9e9e9;
			color: rgba(0,0,0,.65);
			font-size: 14px;
			background: #f7f7f7;
			/*border-radius: 4px;*/
			margin-right: 10px;
			margin-bottom: 10px;
			position: relative;
		}
		.add_active{
			background: #fff !important;
			box-shadow: 0 2px 0 rgba(0,0,0,.015) !important;
			cursor: pointer;
		}
		.add_active:hover{
			border-color: #40a9ff;
			color: #40a9ff;
			transition: all .3s
		}
		.inputLable{
			height: 28px;
			margin-bottom: 10px;
			outline: none;
			background: #fff;
			border: 1px solid #ececec;
			/*border-radius: 5px;*/
			padding: 0 10px;
			width: 111px;
			margin-right: 10px;
		}
		.inputLable:focus{
			border-color: #40a9ff;
		}
		.deleteLabel{
			position: absolute;
			width: 10px;
			height: 10px;
			right: -5px;
			top: -4px;
			background: #a2a2a2;
			border-radius: 50%;
			padding: 2px;
			cursor: pointer;
		}
		/*标签部分*/

	</style>
</head>
<body>
	<!-- 新版公共头部 -->
	<div class="public_header_container">
		<p>创建规则</p>
	</div>
	<!-- 新公共内容区域 -->
	<form class="layui-form" action="" id="addAutomatictag">
		<div class="public_main_container">
			<div class="public_main_content">
				<h3 class="customerInfo_firstTitle">创建自动打标签规则</h3>
				<input type="hidden" name="" value="{$automatic->id}" id="id">
				<div class="line"></div>
				<div class="layui-form-item" style="margin-bottom: 0;">
					<label class="layui-form-label">打标签方式</label>
					<div class="layui-input-block" style="width: 150px;">
						<div class="public_RightShowcased_container">
							<span style="font-weight: bold;">关键词打标签</span>
						</div>
					</div>
					<div class="layui-input-block">
						<p style="color: #999">根据客户聊天行为，设定客户在聊天过程中提到的关键词，自动将提到关键词的客户打标签</p>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">规则名称</label>
					<div class="layui-input-block" style="width: 500px;">
						<input type="text" name="name" required  value="{$automatic->name}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生效员工</label>
					<div class="layui-input-block" style="width: 250px;">
						<!-- 点击打开选择员工页面 -->
						<ul class="public_RightShowcased_container cursor-pointer public_PopButton" id="checkUserCon">
							<!-- 没数据显示 -->
							{if $automatic->user_id}
								{loop $automatic->user_id as $user_id}
									<li>{$h->get_user_by_id($automatic->wid,$user_id)['name']}</li>
								{/loop}
							{else}
								<li style="color: #c9c9c9;">点击选择员工</li>
							{/if}
							<!-- 有数据显示 -->
							<!-- <li>阿斯蒂芬、</li>
							<li>阿斯蒂芬、</li>
							<li>阿斯蒂芬、</li> -->
						</ul>
						<input type="hidden" name="checkUser" id="checkUser" value="{implode(',',$automatic->user_id)}">
					</div>
				</div>
				<h3 class="customerInfo_firstTitle">设置关键词</h3>
				<div class="line"></div>
				<div class="layui-form-item">
					<label class="layui-form-label">模糊匹配</label>
					<div class="layui-input-block">
						<input type="hidden" name="fuzzyMatch" id="fuzzyMatch" value="{implode(',',$automatic->fuzzy_match_words)}">
						<ul class="customerLabel_mainList_content fuzzyMatch">
							<li class="add_active">+ 添加</li>
							<input class="inputLable" type="text" name="" placeholder="输入后回车" style="display: none;">
							<!-- 循环 -->
							{loop $automatic->fuzzy_match_words as $fuzzy}
							<li>
								<span>{$fuzzy}</span>
								<svg class="deleteLabel" t="1614329734901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" width="30" height="30"><path d="M604.672 523.776l364.544-364.544c25.088-25.088 25.088-66.048 0-90.624l-2.048-2.048c-12.288-12.288-28.16-18.944-45.568-18.944s-33.28 6.656-45.568 18.944L512 431.616 147.456 66.56c-12.288-12.288-28.16-18.944-45.568-18.944-17.408 0-33.28 6.656-45.568 18.944l-2.048 2.048c-12.288 12.288-19.456 28.16-19.456 45.568s6.656 33.28 18.944 45.568l364.544 364.544L53.76 888.832c-25.088 25.088-25.088 66.048 0 90.624l2.048 2.048c12.288 12.288 28.16 18.944 45.568 18.944 17.408 0 33.28-6.656 45.568-18.944L511.488 616.96l364.544 364.544c12.288 12.288 28.16 18.944 45.568 18.944s33.28-6.656 45.568-18.944l2.048-2.048c12.288-12.288 18.944-28.16 18.944-45.568 0-17.408-6.656-33.28-18.944-45.568L604.672 523.776z" p-id="2345" fill="#fff"></path></svg>
							</li>
							{/loop}
						</ul>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">精准匹配</label>
					<div class="layui-input-block">
						<input type="hidden" name="preciseMatch" id="preciseMatch" value="{implode(',',$automatic->precise_match_words)}">
						<ul class="customerLabel_mainList_content preciseMatch">
							<li class="add_active">+ 添加</li>
							<input class="inputLable" type="text" name="" placeholder="输入后回车" style="display: none;">
							<!-- 循环 -->
							{loop $automatic->precise_match_words as $precise}
							<li>
								<span>{$precise}</span>
								<svg class="deleteLabel" t="1614329734901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" width="30" height="30"><path d="M604.672 523.776l364.544-364.544c25.088-25.088 25.088-66.048 0-90.624l-2.048-2.048c-12.288-12.288-28.16-18.944-45.568-18.944s-33.28 6.656-45.568 18.944L512 431.616 147.456 66.56c-12.288-12.288-28.16-18.944-45.568-18.944-17.408 0-33.28 6.656-45.568 18.944l-2.048 2.048c-12.288 12.288-19.456 28.16-19.456 45.568s6.656 33.28 18.944 45.568l364.544 364.544L53.76 888.832c-25.088 25.088-25.088 66.048 0 90.624l2.048 2.048c12.288 12.288 28.16 18.944 45.568 18.944 17.408 0 33.28-6.656 45.568-18.944L511.488 616.96l364.544 364.544c12.288 12.288 28.16 18.944 45.568 18.944s33.28-6.656 45.568-18.944l2.048-2.048c12.288-12.288 18.944-28.16 18.944-45.568 0-17.408-6.656-33.28-18.944-45.568L604.672 523.776z" p-id="2345" fill="#fff"></path></svg>
							</li>
							{/loop}
						</ul>
					</div>
				</div>
				<h3 class="customerInfo_firstTitle">自动打标签</h3>
				<div class="line"></div>
				<div class="layui-form-item">
					<label class="layui-form-label">选择标签</label>
					<div class="layui-input-block" style="width: 300px;">
					<!-- 	<select name="city" lay-verify="required">
							<option value=""></option>
							<option value="0">北京</option>
							<option value="1">上海</option>
							<option value="2">广州</option>
							<option value="3">深圳</option>
							<option value="4">杭州</option>
						</select> -->
						<ul class="public_RightShowcased_container cursor-pointer" id="checkLableCon">
							<!-- 没数据显示 -->
							{if $automatic->tag}
								<li>{$etTagArr[$automatic->tag]}</li>
							{else}
								<li style="color: #c9c9c9;">点击选择标签</li>
							{/if}
							
							<!-- 有数据显示 -->
							<!-- <li>阿斯蒂芬、</li> -->
						</ul>
						<input type="hidden" name="checkLable" id="checkLable" value="{$automatic->tag}">
					</div>
					<div class="layui-input-block">
						<p style="color: #999">满足以上条件的客户将会被打上标签，保存规则后，客户未来只要满足了条件就会被打上标签</p>
					</div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button type="button" class="layui-btn" lay-submit lay-filter="addAutomatictag">立即提交</button>
				      <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
				    </div>
				  </div>
			</div>
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		// 表单
		layui.use('form', function(){
			var form = layui.form;

		  //监听提交
		  form.on('submit(addAutomatictag)', function(data){
		  	console.log(data); 
		  	if(!data.field.checkUser){
		  		tusi('请选择成员'); return;
		  	}
		  	if(!data.field.fuzzyMatch && !data.field.preciseMatch){
		  		tusi('模糊匹配与精准匹配至少有一个值'); return;
		  	}
		  	if(!data.field.checkLable){
		  		tusi('请选择标签'); return;
		  	}
		  	var formData = $('#addAutomatictag').serialize();
		  	let id = $("#id").val();
		  	console.log(id);
		  	myAjaxPost(false, true, 'add_automatictag.html?id='+id, formData, function (resp) {
		    	console.log(resp);
				if (resp.status == 'success') {
					tusi(resp.msg);
					setTimeout(function(){
						location.href = 'index.html';
					},1000);
				}else{
					tusi(resp.msg);
				}
			});
		  });
		});
		// 弹窗
		layui.use('layer', function(){
			var layer = layui.layer;
		}); 
	</script>
	<script type="text/javascript">
		// 点击打开选择员工页面
		$('.public_PopButton').on('click',function(){
			layer.open({
				type: 2,
				title: '基本信息设置',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '500px'],
				content: 'select_user.html'
			}); 
		})
		// 点击打开选择标签页面
		$('#checkLableCon').on('click',function(){
			layer.open({
				type: 2,
				title: '基本信息设置',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '530px'],
				content: 'select_tag.html'
			}); 
		})
	</script>
	<!-- 标签部分 -->
	<script type="text/javascript">
		let $div = '<input class="inputLable" type="text" name="" placeholder="输入后回车">';
		$('.add_active').click(function(){
			$(this).next().show();
			$(this).next().focus();
		})
		$(".inputLable").on("keypress",function(event){
			if(event.keyCode == 13){
				// alert('内容是：' + $(this).val());
				let val = $(this).val();
			    $('.inputLable').val('');
			    $('.inputLable').hide();
			    $(this).after("<li><span>"+ val +"</span><svg class='deleteLabel't='1614329734901'class='icon'viewBox='0 0 1024 1024'version='1.1'xmlns='http://www.w3.org/2000/svg'p-id='2344'width='30'height='30'><path d='M604.672 523.776l364.544-364.544c25.088-25.088 25.088-66.048 0-90.624l-2.048-2.048c-12.288-12.288-28.16-18.944-45.568-18.944s-33.28 6.656-45.568 18.944L512 431.616 147.456 66.56c-12.288-12.288-28.16-18.944-45.568-18.944-17.408 0-33.28 6.656-45.568 18.944l-2.048 2.048c-12.288 12.288-19.456 28.16-19.456 45.568s6.656 33.28 18.944 45.568l364.544 364.544L53.76 888.832c-25.088 25.088-25.088 66.048 0 90.624l2.048 2.048c12.288 12.288 28.16 18.944 45.568 18.944 17.408 0 33.28-6.656 45.568-18.944L511.488 616.96l364.544 364.544c12.288 12.288 28.16 18.944 45.568 18.944s33.28-6.656 45.568-18.944l2.048-2.048c12.288-12.288 18.944-28.16 18.944-45.568 0-17.408-6.656-33.28-18.944-45.568L604.672 523.776z'p-id='2345'fill='#fff'></path></svg></li>");
			    let matchType = $(this).parent().prev().attr('id');
			    reset_match_val(matchType);
			}  
		});
		$(".inputLable").blur(function(){
		  $('.inputLable').hide();
		  $('.inputLable').val('');
		});
		$('body').on('click','.deleteLabel',function(){
			let	matchType = $(this).parent().parent().prev().attr('id');
			$(this).parent().remove();
			reset_match_val(matchType);
		})

		function reset_match_val(matchType){
			var matchWords = $("."+matchType+" li span");
			let words = [];
			for (var i = 0, l = matchWords.length; i < l; i++) {
		        words.push($(matchWords[i]).text());
		    }
			$("#"+matchType).val(words);
		}
	</script>
</body>
</html>